<template>
  <el-dialog
      :close-on-click-modal="false"
      :visible="isShowAddNumDialog"
      :title="title"
      @close="$emit('close')"
      width="600px"
    >
      <el-form
        class="form"
        ref="form"
        :model="form"
        :rules="rules"
        size="small"
        label-width="90px"
      >
        <el-form-item label="名称:" prop="name">
          <span>{{  info.name }}</span>
        </el-form-item>
        <el-form-item label="类型:" prop="category">
          <span v-if="info.category == 1">玻璃器皿</span>
          <span v-else-if="info.category == 2">实验耗材</span>
          <span v-else-if="info.category == 3">采样工具</span>
          <span v-else-if="info.category == 4">仪器设备</span>
        </el-form-item>
        <el-form-item v-if="info.category == 1" label="规格:" prop="capacity">
          <span>{{  info.capacity }} mL</span>
        </el-form-item>
        <div style="display: flex">
          <el-form-item label="数量:" prop="amount">
            <el-input
              min="0"
              type="number"
              v-model="form.amount"
              style="width: 355px"
              placeholder="请填入数量"
            />
            <span v-if="info.unit==1"> 个</span>
            <span v-else-if="info.unit==2"> 台</span>
            <span v-else-if="info.unit==3"> 套</span>
          </el-form-item>
        </div>
        <el-form-item label="仓库" prop="storage">
            <el-select
              v-model="form.storage"
              style="width: 370px"
              placeholder="请选择仓库"
            >
              <el-option
                v-for="item in storageOptions"
                :key="item.label"
                :label="item.value"
                :value="item.label"
              />
            </el-select>
          </el-form-item>
        <!-- <el-form-item label="仓库:" prop="storage">
          <span v-if="info.storage == 1">器材室</span>
          <span v-else-if="info.storage == 2">备品室</span>
          <span v-else-if="info.storage == 3">外业仓库</span>
        </el-form-item> -->
        <el-form-item
          label="是否审批:"
          prop="isAudit"
        >
        <span>{{ info.isAudit == 0 ? "否" : "是" }}</span>
        </el-form-item>
        <el-form-item label="位置:">
          <span>{{ info.location || '无'}}</span>
        </el-form-item>
        <el-form-item label="备注:">
          <span>{{ info.note || '无'}}</span>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="text" @click="$emit('close')">取消</el-button>
        <el-button
          type="primary"
          @click="addNum"
          >确认</el-button
        >
      </div>
    </el-dialog>
</template>

<script>
import { warehousingAPI} from '@/api/hazardousChemicals'
export default {
props:{
  info:{
    type:Object,
    default: {}
  },
  isShowAddNumDialog:{
    type:Boolean,
    default:false
  }
},
data () {
  let limtAmount = (rule, value, callback) => {
    if (!value) {
      return callback(new Error("数量不能为空"));
    } else if (!(parseInt(value) === parseFloat(value))) {
      return callback(new Error("数量只能为整数"));
    }
    callback();
  };
  return {
    form:{
      amount:'',
      storage: this.info.storage
    },
    rules:{
      amount: [{ required: true, trigger: "blur", validator: limtAmount }],
      storage: [{ required: true, message: "请选择仓库", trigger: "blur" }],
    },
    title: this.info.name+'- 入库',
    storageOptions: [
        {
          value: "器材室",
          label: 1,
        },
        {
          value: "备品室",
          label: 2,
        },
        {
          value: "外业仓库",
          label: 3,
        },
      ],
  }
},

created () {

},

methods: {
  addNum(){
      this.$refs.form.validate(async (valid)=>{
       if(!valid) return
       try {
         await warehousingAPI({
        id: this.info.id,
        amount: this.form.amount,
        storage: this.form.storage
      })
      this.$message.success('入库成功')
       } catch (error) {
        this.$message.error('入库失败')
       }finally{
        this.$emit('close')
        this.$emit('refresh')
       }

      })
    }
}
}
</script>

<style scoped>

</style>
